<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>多项调节服务可视化</title>
    <!-- <script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script> -->
    <!-- <script src="https://cdn.jsdelivr.net/npm/echarts/map/js/china.js"></script> -->
    <!-- <link rel="stylesheet" href="style.css"> -->
    <script src="../js/chart.js"></script>
    <script src="../js/xlsx.full.min.js"></script>
    <script src="../js/echarts.min.js"></script>
    <script src="../js/echarts_china.js"></script>
    <style>
        body {
            font-family: Arial, sans-serif;
            text-align: center;
            margin-top: 50px;
        }

        .chartContainer {
            width: 80%;
            /* height: 80%; */
            height: 800px;
            margin: 0 auto;
        }

        #mapContainer1 {
            width: 100%;
            height: 100%;
            /*height: 800px;*/
            margin: 20px auto;
            border: 1px red solid;
        }

        #mapContainer2 {
            width: 100%;
            height: 100%;
            /*width: 80%;*/
            /*!* height: 80%; *!*/
            /*height: 800px;*/
            margin: 20px auto;
            border: 1px red solid;
        }

        #mapContainer3 {
            width: 100%;
            height: 100%;
            /*width: 80%;*/
            /*!* height: 80%; *!*/
            /*height: 800px;*/
            margin: 20px auto;
            border: 1px red solid;
        }

        select {
            margin-bottom: 20px;
        }

        table {
            width: 80%;
            margin: 20px auto;
            border-collapse: collapse;
            text-align: center;
        }

        th, td {
            border: 1px solid #ddd;
            padding: 8px;
        }

        th {
            background-color: #f2f2f2;
        }

        nav {
            margin-bottom: 20px;
        }

        nav a {
            margin: 0 10px;
            text-decoration: none;
            color: #007BFF;
            font-weight: bold;
        }

        nav a:hover {
            text-decoration: underline;
        }
    </style>
</head>
<body>
    <nav>        <a href="../index.html">首页</a>
        <a href="calculate_service_percentage.html">计算调节服务占比</a>
        <a href="pie_service_percentage.html">核算地区调节服务占比可视化</a>
        <a href="single_service.html">单项调节各地区占比</a>
        <a href="adjust_service_value.html">调整气候调节服务项的价值量</a>
        <a href="multi_service.html">多项调节服务可视化</a>
    </nav>
<h1>多项调节服务可视化</h1>
<input type="file" id="fileInput" accept=".xlsx, .xls">
<div class="chartContainer">
    <div id="mapContainer1"></div>
</div>
<div class="chartContainer">
    <div id="mapContainer2"></div>
</div>
<div class="chartContainer">
    <div id="mapContainer3"></div>
</div>
<table id="dataTable">
    <thead>
    <tr>
        <th>行政区划代码</th>
        <th>核算地区</th>
        <th>面积（km²）</th>
        <th>调节服务项</th>
        <th>生态系统</th>
        <th>实物量总值（t）</th>
        <th>价格（元/t）</th>
        <th>价值量总值（元）</th>
        <th>调节服务项占比（%）</th>
    </tr>
    </thead>
    <tbody>
    </tbody>
</table>


<script>
    let myCharts;
    let myCharts00;
    let myCharts01;
    let myCharts02;
    let jsonData; // 定义为全局变量

    let headers;
    let regionIndex;
    let serviceIndex;
    let quantityIndex;
    let valueIndex;
    let percentageIndex;
    let roam = true; // 地图的缩放平移控制键
    let roam00 = false; // 地图的缩放平移控制键
    let roam01 = false; // 地图的缩放平移控制键
    let roam02 = false; // 地图的缩放平移控制键

    document.getElementById('fileInput').addEventListener('change', function (event) {
        const file = event.target.files[0];
        if (file) {
            const reader = new FileReader();
            reader.onload = function (e) {
                const data = e.target.result;
                const workbook = XLSX.read(data, {type: 'binary'});
                const sheetName = workbook.SheetNames[0];
                const worksheet = workbook.Sheets[sheetName];
                jsonData = XLSX.utils.sheet_to_json(worksheet, {header: 1});
                // jsonData = sheet_to_json_data;

                headers = jsonData[0];
                regionIndex = headers.indexOf('核算地区');
                serviceIndex = headers.indexOf('调节服务项');
                quantityIndex = headers.indexOf('实物量总值（t）');
                valueIndex = headers.indexOf('价值量总值（元）');
                percentageIndex = headers.indexOf('调节服务项占比（%）');

                drawMaps();
                updateTable();
            };
            reader.readAsBinaryString(file);
        }
    });

    function formatRegionName(name) {
        const specialCases = {
            '广西壮族自治区': '广西',
            '内蒙古自治区': '内蒙古',
            '宁夏回族自治区': '宁夏',
            '新疆维吾尔自治区': '新疆',
            '西藏自治区': '西藏',
            '特别行政区': '' // 假设没有特别行政区的数据，如果有需要添加
        };

        if (specialCases[name]) {
            return specialCases[name];
        }

        const suffixesToRemove = ['省', '市'];
        for (let suffix of suffixesToRemove) {
            if (name.endsWith(suffix)) {
                return name.slice(0, -suffix.length);
            }
        }
        return name;
    }

    function drawMaps() {
        // 构建服务项 -> 数据映射
        const quantityDataMap = {};
        jsonData.slice(1).forEach(row => {
            const serviceName = row[serviceIndex];
            if (!quantityDataMap[serviceName]) {
                quantityDataMap[serviceName] = [];
            }
            quantityDataMap[serviceName].push({
                name: formatRegionName(row[regionIndex]),
                value: parseFloat(row[quantityIndex])
            });
        });

        const valueDataMap = {};
        jsonData.slice(1).forEach(row => {
            const serviceName = row[serviceIndex];
            if (!valueDataMap[serviceName]) {
                valueDataMap[serviceName] = [];
            }
            valueDataMap[serviceName].push({
                name: formatRegionName(row[regionIndex]),
                value: parseFloat(row[valueIndex])
            });
        });

        const percentageDataMap = {};
        jsonData.slice(1).forEach(row => {
            const serviceName = row[serviceIndex];
            if (!percentageDataMap[serviceName]) {
                percentageDataMap[serviceName] = [];
            }
            percentageDataMap[serviceName].push({
                name: formatRegionName(row[regionIndex]),
                value: parseFloat(row[percentageIndex])
            });
        });

        // myCharts00.push(echarts.init(document.getElementById('mapContainer1')));
        // myCharts01.push(echarts.init(document.getElementById('mapContainer2')));
        // myCharts02.push(echarts.init(document.getElementById('mapContainer3')));
        // 初始化图表实例
        myCharts00 = echarts.init(document.getElementById('mapContainer1'));
        myCharts01 = echarts.init(document.getElementById('mapContainer2'));
        myCharts02 = echarts.init(document.getElementById('mapContainer3'));

        // 计算动态 min 和 max 的函数
        function calculateMinMax(seriesList) {
            let min = Infinity;
            let max = -Infinity;

            seriesList.forEach(series => {
                series.data.forEach(item => {
                    if (item.value < min) min = item.value;
                    if (item.value > max) max = item.value;
                });
            });

            // 处理特殊情况：如果所有值相同，设置一个合理的范围
            if (min === max) {
                min = min * 0.9; // 向下扩展10%
                max = max * 1.1; // 向上扩展10%
            }

            // 确保 min 和 max 是有效数字
            return {
                min: isFinite(min) ? min : 0,
                max: isFinite(max) ? max : 100
            };
        }

        // 添加数值格式化函数
        function formatValue(value) {
            if (value >= 100000000) { // 超过8位数（1亿）
                return (value / 100000000).toFixed(2) + '亿';
            } else if (value >= 10000) { // 超过5位数（1万）
                return (value / 10000).toFixed(2) + '万';
            }
            return value + ''; // 其他情况
        }

        // 全屏切换函数
        function toggleFullscreen(element) {
            if (!document.fullscreenElement) {
                if (element.requestFullscreen) {
                    element.requestFullscreen();
                } else if (element.mozRequestFullScreen) { /* Firefox */
                    element.mozRequestFullScreen();
                } else if (element.webkitRequestFullscreen) { /* Chrome, Safari & Opera */
                    element.webkitRequestFullscreen();
                } else if (element.msRequestFullscreen) { /* IE/Edge */
                    element.msRequestFullscreen();
                }
            } else {
                if (document.exitFullscreen) {
                    document.exitFullscreen();
                } else if (document.mozCancelFullScreen) {
                    document.mozCancelFullScreen();
                } else if (document.webkitExitFullscreen) {
                    document.webkitExitFullscreen();
                } else if (document.msExitFullscreen) {
                    document.msExitFullscreen();
                }
            }
        }

        // 定义 changeRoam 函数（放在容易访问的位置）
        function changeRoam(myCharts, seriesList) {
            roam = !roam; // 切换缩放状态

            // 更新系列配置
            console.log("seriesList更新前", seriesList)
            seriesList.forEach(series => {
                series.roam = roam;
            });
            console.log("seriesList更新后", seriesList)
            // 重新设置图表选项
            myCharts.setOption({
                series: seriesList
            }, true);

            console.log("缩放状态已切换:", roam ? "开启" : "关闭");
        }

        // 动态生成 series 列表
        let seriesList00 = Object.keys(quantityDataMap).map(serviceName => ({
            name: serviceName,
            type: 'map',
            mapType: 'china',
            roam: roam,
            label: {
                normal: {
                    show: true
                },
                emphasis: {
                    show: true
                }
            },
            data: quantityDataMap[serviceName]
        }));
        // 在 setOption 中使用动态计算的值
        const range00 = calculateMinMax(seriesList00);

        myCharts00.setOption({
            title: {
                text: '实物量总值',
                subtext: '',
                left: 'center'
            },

            tooltip: {
                trigger: 'item',
                formatter: function (params) {
                    return params.name + ': ' + formatValue(params.value) + '吨';
                }
            },
            legend: {
                orient: 'vertical',
                left: 'left',
                data: ['气候调节', '空气净化', '水质净化', '固定二氧化碳', '土壤保持', '水源涵养', '洪水调蓄']
            },
            visualMap: {
                min: range00.min,
                max: range00.max, left: 'left', top: 'bottom', calculable: true
            },
            toolbox: {
                show: true,
                orient: 'vertical',
                left: 'right',
                top: 'center',
                feature: {
                    saveAsImage: {
                        title: '保存图片',
                        pixelRatio: 2 // 提高图片质量
                    },
                    restore: {
                        title: '还原'
                    },
                    dataView: {
                        title: '数据视图',
                        readOnly: true
                    },
                    myFullscreen: {
                        show: true,
                        title: '全屏',
                        icon: 'path://M432.45,595.444c0,2.177-4.661,6.82-11.305,6.82c-6.475,0-11.306-4.567-11.306-6.82v-203.42H222.46c-2.178,0-6.82,4.661-6.82,11.305c0,6.475,4.567,11.306,6.82,11.306h203.42v203.42c0,2.178,4.661,6.82,11.305,6.82c6.475,0,11.306-4.567,11.306-6.82v-203.42h203.42c2.178,0,6.82-4.661,6.82-11.305c0-6.475-4.567-11.306-6.82-11.306h-203.42v-203.42c0-2.177-4.661-6.82-11.305-6.82c-6.475,0-11.306,4.567-11.306,6.82v203.42h-203.42c-2.178,0-6.82,4.661-6.82,11.305c0,6.475,4.567,11.306,6.82,11.306h203.42v203.42z',
                        onclick: function () {
                            toggleFullscreen(document.getElementById('mapContainer1'));
                        }
                    },
                    myRoam: {
                        show: true,
                        title: '缩放平移',
                        // icon: 'path://M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm316.8 316.8L716.8 512l111.9 111.9-62.3 62.3L654.5 574.3l-111.9 111.9-62.3-62.3L592.2 512l-111.9-111.9 62.3-62.3L654.5 449.7l111.9-111.9 62.3 62.3zM307.2 512l111.9-111.9-62.3-62.3L369.5 449.7 257.6 337.8l-62.3 62.3L307.2 512l-111.9 111.9 62.3 62.3L369.5 574.3l111.9 111.9 62.3-62.3L307.2 512z',
                        icon: 'path://M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64z m234.7 553.3l-62.3 62.3-111.9-111.9-111.9 111.9-62.3-62.3L511.9 512l-111.9-111.9 62.3-62.3L512 449.7l111.9-111.9 62.3 62.3L574.3 512l111.9 111.9z',
                        // icon: 'path://M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64z m0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z m-40-578h80v160h160v80H552v160h-80V552H312v-80h160V286z',
                        // icon: 'path://M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64z m0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z m-40-578h80v160h160v80H552v160h-80V552H312v-80h160V286z',
                        iconStyle: {
                            color: roam00 ? '#5470c6' : '#999' // 启用时蓝色，禁用时灰色
                        },
                        onclick: function () {
                            console.log("点击前", roam00);
                            changeRoam(myCharts00, seriesList00, roam00);
                            console.log("点击后", roam00);
                        }
                    },

                }
            },
            series: seriesList00
        });
        const seriesList01 = Object.keys(valueDataMap).map(serviceName => ({
            name: serviceName,
            type: 'map',
            mapType: 'china',
            roam: roam,
            label: {
                normal: {
                    show: true
                },
                emphasis: {
                    show: true
                }
            },
            data: valueDataMap[serviceName]
        }));
        const range01 = calculateMinMax(seriesList01);
        myCharts01.setOption({

            title: {
                text: '价值量总值',
                subtext: '',
                left: 'center'
            },
            tooltip: {
                trigger: 'item',
                formatter: function (params) {
                    return params.name + ': ' + formatValue(params.value) + '元';

                }
            },
            legend: {
                orient: 'vertical',
                left: 'left',
                data: ['气候调节', '空气净化', '水质净化', '固定二氧化碳', '土壤保持', '水源涵养', '洪水调蓄']
            },
            visualMap: {
                min: range01.min,
                max: range01.max, left: 'left', top: 'bottom', calculable: true
            },
            toolbox: {
                show: true,
                orient: 'vertical',
                left: 'right',
                top: 'center',
                feature: {
                    saveAsImage: {
                        title: '保存图片',
                        pixelRatio: 2 // 提高图片质量
                    },
                    restore: {
                        title: '还原'
                    },
                    dataView: {
                        title: '数据视图',
                        readOnly: true
                    },
                    myFullscreen: {
                        show: true,
                        title: '全屏',
                        icon: 'path://M432.45,595.444c0,2.177-4.661,6.82-11.305,6.82c-6.475,0-11.306-4.567-11.306-6.82v-203.42H222.46c-2.178,0-6.82,4.661-6.82,11.305c0,6.475,4.567,11.306,6.82,11.306h203.42v203.42c0,2.178,4.661,6.82,11.305,6.82c6.475,0,11.306-4.567,11.306-6.82v-203.42h203.42c2.178,0,6.82-4.661,6.82-11.305c0-6.475-4.567-11.306-6.82-11.306h-203.42v-203.42c0-2.177-4.661-6.82-11.305-6.82c-6.475,0-11.306,4.567-11.306,6.82v203.42h-203.42c-2.178,0-6.82,4.661-6.82,11.305c0,6.475,4.567,11.306,6.82,11.306h203.42v203.42z',
                        onclick: function () {
                            toggleFullscreen(document.getElementById('mapContainer1'));
                        }
                    },
                    myRoam: {
                        show: true,
                        title: '缩放平移',
                        // icon: 'path://M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm316.8 316.8L716.8 512l111.9 111.9-62.3 62.3L654.5 574.3l-111.9 111.9-62.3-62.3L592.2 512l-111.9-111.9 62.3-62.3L654.5 449.7l111.9-111.9 62.3 62.3zM307.2 512l111.9-111.9-62.3-62.3L369.5 449.7 257.6 337.8l-62.3 62.3L307.2 512l-111.9 111.9 62.3 62.3L369.5 574.3l111.9 111.9 62.3-62.3L307.2 512z',
                        icon: 'path://M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64z m234.7 553.3l-62.3 62.3-111.9-111.9-111.9 111.9-62.3-62.3L511.9 512l-111.9-111.9 62.3-62.3L512 449.7l111.9-111.9 62.3 62.3L574.3 512l111.9 111.9z',
                        // icon: 'path://M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64z m0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z m-40-578h80v160h160v80H552v160h-80V552H312v-80h160V286z',
                        // icon: 'path://M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64z m0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z m-40-578h80v160h160v80H552v160h-80V552H312v-80h160V286z',
                        iconStyle: {
                            color: roam01 ? '#5470c6' : '#999' // 启用时蓝色，禁用时灰色
                        },
                        onclick: function () {
                            console.log("点击前", roam01);
                            changeRoam(myCharts01, seriesList01, roam01);
                            console.log("点击后", roam01);
                        }
                    },

                }
            },
            series: seriesList01
        });
        const seriesList02 = Object.keys(percentageDataMap).map(serviceName => ({
            name: serviceName,
            type: 'map',
            mapType: 'china',
            roam: roam,
            label: {
                normal: {
                    show: true
                },
                emphasis: {
                    show: true
                }
            },
            data: percentageDataMap[serviceName]
        }));
        const range02 = calculateMinMax(seriesList02);
        myCharts02.setOption({
            title: {
                text: '调节服务项价值占比',
                subtext: '',
                left: 'center'
            },
            tooltip: {
                trigger: 'item',
                formatter: function (params) {
                    return params.name + ': ' + params.value.toFixed(2) + '%';

                }
            },
            legend: {
                orient: 'vertical',
                left: 'left',
                data: ['气候调节', '空气净化', '水质净化', '固定二氧化碳', '土壤保持', '水源涵养', '洪水调蓄']
            },
            visualMap: {
                min: range02.min,
                max: range02.max, left: 'left', top: 'bottom', calculable: true
            },
            toolbox: {
                show: true,
                orient: 'vertical',
                left: 'right',
                top: 'center',
                feature: {
                    saveAsImage: {
                        title: '保存图片',
                        pixelRatio: 2 // 提高图片质量
                    },
                    restore: {
                        title: '还原'
                    },
                    dataView: {
                        title: '数据视图',
                        readOnly: true
                    },
                    myFullscreen: {
                        show: true,
                        title: '全屏',
                        icon: 'path://M432.45,595.444c0,2.177-4.661,6.82-11.305,6.82c-6.475,0-11.306-4.567-11.306-6.82v-203.42H222.46c-2.178,0-6.82,4.661-6.82,11.305c0,6.475,4.567,11.306,6.82,11.306h203.42v203.42c0,2.178,4.661,6.82,11.305,6.82c6.475,0,11.306-4.567,11.306-6.82v-203.42h203.42c2.178,0,6.82-4.661,6.82-11.305c0-6.475-4.567-11.306-6.82-11.306h-203.42v-203.42c0-2.177-4.661-6.82-11.305-6.82c-6.475,0-11.306,4.567-11.306,6.82v203.42h-203.42c-2.178,0-6.82,4.661-6.82,11.305c0,6.475,4.567,11.306,6.82,11.306h203.42v203.42z',
                        onclick: function () {
                            toggleFullscreen(document.getElementById('mapContainer1'));
                        }
                    },
                    myRoam: {
                        show: true,
                        title: '缩放平移',
                        // icon: 'path://M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm316.8 316.8L716.8 512l111.9 111.9-62.3 62.3L654.5 574.3l-111.9 111.9-62.3-62.3L592.2 512l-111.9-111.9 62.3-62.3L654.5 449.7l111.9-111.9 62.3 62.3zM307.2 512l111.9-111.9-62.3-62.3L369.5 449.7 257.6 337.8l-62.3 62.3L307.2 512l-111.9 111.9 62.3 62.3L369.5 574.3l111.9 111.9 62.3-62.3L307.2 512z',
                        icon: 'path://M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64z m234.7 553.3l-62.3 62.3-111.9-111.9-111.9 111.9-62.3-62.3L511.9 512l-111.9-111.9 62.3-62.3L512 449.7l111.9-111.9 62.3 62.3L574.3 512l111.9 111.9z',
                        // icon: 'path://M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64z m0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z m-40-578h80v160h160v80H552v160h-80V552H312v-80h160V286z',
                        // icon: 'path://M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64z m0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z m-40-578h80v160h160v80H552v160h-80V552H312v-80h160V286z',
                        iconStyle: {
                            color: roam02 ? '#5470c6' : '#999' // 启用时蓝色，禁用时灰色
                        },
                        onclick: function () {
                            console.log("点击前", roam02);
                            changeRoam(myCharts02, seriesList02, roam02);
                            console.log("点击后", roam02);
                        }
                    },

                }
            },
            series: seriesList02
        });
    }

    function updateTable() {
        const tableBody = document.getElementById('dataTable').getElementsByTagName('tbody')[0];
        tableBody.innerHTML = '';

        jsonData.slice(1).forEach(row => {
            const tr = document.createElement('tr');
            headers.forEach((header, index) => {
                const td = document.createElement('td');
                td.textContent = row[index];
                tr.appendChild(td);
            });
            tableBody.appendChild(tr);
        });
    }
</script>
</body>
</html>